<template>
  <div class="dash-bg">

    <el-alert
      v-if="isDemo"
      type="error"
      style="margin-bottom: 20px"
    >
      为了保障演示系统的稳定性，重要演示数据无法修改和删除，您可以添加新的数据来体验！系统会不定时还原数据，请勿作为生产使用！
    </el-alert>

    <el-row :gutter="30">
      <el-col :span="18" :lg="19" :md="17" :sm="16">
        <card-stat-nums/>
        <!-- <card-quick-opt/> -->
      </el-col>

      <el-col :span="6" :lg="5" :md="7" :sm="8">
        <card-notice-list/>
      </el-col>

      <el-col :span="24" style="padding-top: 30px">
        <card-course-q-e/>
      </el-col>

      <el-col v-if="siteData.props.moduleExam" :span="12" style="padding-top: 30px">
        <card-exam-list/>
      </el-col>

      <el-col v-if="siteData.props.moduleExam" :span="12" style="padding-top: 30px">
        <line-chart-exam id="chart3" title="考试统计" width="100%" height="300px" />
      </el-col>

      <el-col v-if="siteData.props.moduleCourse" :span="12" style="padding-top: 30px">
        <card-course-list/>
      </el-col>

      <el-col v-if="siteData.props.moduleCourse" :span="12" style="padding-top: 30px">
        <line-chart-course id="chart2" title="学习统计" width="100%" height="300px" />
      </el-col>

      <el-col :span="24" style="padding-top: 30px">
        <line-chart-user id="chart1" title="用户总览" width="100%" height="300px" />
      </el-col>

    </el-row>

  </div>
</template>

<script>
import permission from '@/directive/permission'
import CardStatNums from '@/views/dashboard/components/CardStatNums.vue'
import CardQuickOpt from '@/views/dashboard/components/CardQuickOpt.vue'
import CardNoticeList from '@/views/dashboard/components/CardNoticeList.vue'
import CardExamList from '@/views/dashboard/components/CardExamList.vue'
import LineChartExam from '@/views/dashboard/components/LineChartExam.vue'
import CardCourseList from '@/views/dashboard/components/CardCourseList.vue'
import LineChartCourse from '@/views/dashboard/components/LineChartCourse.vue'
import LineChartUser from '@/views/dashboard/components/LineChartUser.vue'
import CardCourseQE from '@/views/dashboard/components/CardCourseQE.vue'
import { mapGetters } from 'vuex'

export default {
  components: { LineChartUser, LineChartCourse, CardCourseList, LineChartExam, CardExamList, CardNoticeList, CardQuickOpt, CardStatNums, CardCourseQE },
  directives: { permission },
  data() {
    return {
      isDemo: this.$demo
    }
  },
  computed: {
    ...mapGetters([
      'siteData'
    ])
  },
  methods: {

  }
}
</script>

<style scoped>

</style>
